<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../common-resources/js/layui/css/layui.css" >
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1336997_b89xg9ewxgl.css">
    <script src="../../common-resources/js/layui/layui.js" ></script>
</head>
<body style="height: 100%;">


<div class="layui-fluid layui-bg-green">
    <ul class="layui-nav layui-bg-green nav-main" lay-filter="nav-main" >
        <li class="layui-nav-item layui-this"><a href="#/"><i class="layui-icon layui-icon-fire"></i>&nbsp;浏览</a></li>
        <li class="layui-nav-item"><a href="#/planting"><i class="layui-icon layui-icon-tree"></i>&nbsp;种树</a></li>
        <li class="layui-nav-item">
            <a href="javascript:"><i class="layui-icon layui-icon-speaker"></i>&nbsp;消息</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:"><i class="layui-icon layui-icon-praise"></i>&nbsp;赞</a></dd>
                <dd><a href="javascript:"><i class="layui-icon layui-icon-dialogue"></i>&nbsp;私信</a></dd>
                <dd><a href="javascript:"><i class="layui-icon layui-icon-reply-fill"></i>&nbsp;评论</a></dd>
                <dd><a href="javascript:"><i class="layui-icon layui-icon-rate-solid"></i>&nbsp;关注</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:"><i class="layui-icon layui-icon-username"></i>&nbsp;我的</a>
            <dl class="layui-nav-child">
                <dd> <a href="#/signin"><i class="layui-icon layui-icon-user"></i>&nbsp;登陆</a></dd>
                <dd><a href="javascript:"><i class="layui-icon layui-icon-auz"></i>&nbsp;安全设置</a></dd>
                <dd><a href="javascript:"><i class="layui-icon layui-icon-theme"></i>&nbsp;界面偏好</a></dd>
                <dd><a href="javascript:"><i class="layui-icon layui-icon-code-circle"></i>&nbsp;参与项目</a></dd>
            </dl>
        </li>
    </ul>
</div>
<div style="overflow: hidden;height: 100%;">
    <div style="height: 100%;width: 232px;background-color: #393D49;margin:0 0;padding: 20px .2rem;float: left;" >
    <!--    <div class="layui-container">-->
        <div class=" avatar" style="border: #4E5465 1px solid;border-radius: 50%;background-color: #fbfbfb;width: 104px;height: 104px;margin: auto"></div>
        <span class="layui-breadcrumb" lay-separator="|" style="line-height: 3.4;white-space: nowrap;padding-left: 12px;">
           <a href="">大V认证</a>
           <a href="">信誉积分</a>
           <a href="">项目数量</a>
        </span>
    <!--    </div>-->
        <div class="layui-container">
            <ul class="layui-nav layui-nav-tree" lay-filter="test"  >
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> 默认选中属性layui-nav-itemed-->
                <li class="layui-nav-item " lay-unselect>
                    <a href="javascript:">我的DreamTree</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:">项目具体页面</a></dd>
                        <dd><a href="javascript:">成长完成的树</a></dd>
                        <dd><a href="javascript:">我的新项目</a></dd>
                        <dd><a href="javascript:">预览其他视角效果</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:">消息中心</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">我的私信</a></dd>
                        <dd><a href="">项目动态</a></dd>
                        <dd><a href="">评论及回复</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:" >信誉积分</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">守约记录</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-unselect><a href="javascript:" >我的收藏</a></li>
                <li class="layui-nav-item" lay-unselect><a href="javascript:" >我的认证</a></li>
                <li class="layui-nav-item" lay-unselect><a href="javascript:" >个人资料</a></li>
                <li class="layui-nav-item" lay-unselect><a href="javascript:" >安全设置</a></li>
            </ul>
        </div>
    </div>

    <div style="overflow: hidden;padding: 24px 4% 2% 6%;height: 100%;">
        <div style="margin-bottom: 16px;">
            <button type="button" class="layui-btn layui-btn-primary">私信</button>
            <button type="button" class="layui-btn layui-btn-primary">项目通知</button>
            <button type="button" class="layui-btn layui-btn-primary">评论回复通知</button>
        </div>
        <div style="border: 1px solid #797979;height: 76%;">
            <div style="display: flex;width: 94%;margin: 12px auto; border-bottom: 1px solid #797979;align-items: center;height:82px;justify-content: space-between;padding: 0 8px;">
                <div style="width: 56px;height: 56px;background-color: #607d8b;border-radius: 50%;"></div>
                <div style="margin-left: -204px;">
                    <div style="font-size: x-large;">韩宇轩</div>
                    <div>您好，请问...</div>
                </div>
                <div style="width: 20%;height: 80%;position: relative;">
                    <i class="iconfont icon-duoxuankuang" style="    position: absolute;right: 0;line-height: 3.4;font-size: 22px;"></i>
                </div>

            </div>
            <div style="display: flex;width: 94%;margin: 12px auto; border-bottom: 1px solid #797979;align-items: center;height:82px;justify-content: space-between;padding: 0 8px;">
                <div style="width: 56px;height: 56px;background-color: #607d8b;border-radius: 50%;"></div>
                <div style="margin-left: -204px;">
                    <div style="font-size: x-large;">韩宇轩</div>
                    <div>您好，请问...</div>
                </div>
                <div style="width: 20%;height: 80%;position: relative;">
                    <i class="iconfont icon-duoxuankuang" style="    position: absolute;right: 0;line-height: 3.4;font-size: 22px;"></i>
                </div>

            </div>
            <div style="display: flex;width: 94%;margin: 12px auto; border-bottom: 1px solid #797979;align-items: center;height:82px;justify-content: space-between;padding: 0 8px;">
                <div style="width: 56px;height: 56px;background-color: #607d8b;border-radius: 50%;"></div>
                <div style="margin-left: -204px;">
                    <div style="font-size: x-large;">韩宇轩</div>
                    <div>您好，请问...</div>
                </div>
                <div style="width: 20%;height: 80%;position: relative;">
                    <i class="iconfont icon-duoxuankuang" style="    position: absolute;right: 0;line-height: 3.4;font-size: 22px;"></i>
                </div>

            </div>
            <div style="display: flex;width: 94%;margin: 12px auto; border-bottom: 1px solid #797979;align-items: center;height:82px;justify-content: space-between;padding: 0 8px;">
                <div style="width: 56px;height: 56px;background-color: #607d8b;border-radius: 50%;"></div>
                <div style="margin-left: -204px;">
                    <div style="font-size: x-large;">韩宇轩</div>
                    <div>您好，请问...</div>
                </div>
                <div style="width: 20%;height: 80%;position: relative;">
                    <i class="iconfont icon-duoxuankuang" style="    position: absolute;right: 0;line-height: 3.4;font-size: 22px;"></i>
                </div>

            </div>
            <div style="display: flex;width: 94%;margin: 12px auto; border-bottom: 1px solid #797979;align-items: center;height:82px;justify-content: space-between;padding: 0 8px;">
                <div style="width: 56px;height: 56px;background-color: #607d8b;border-radius: 50%;"></div>
                <div style="margin-left: -204px;">
                    <div style="font-size: x-large;">韩宇轩</div>
                    <div>您好，请问...</div>
                </div>
                <div style="width: 20%;height: 80%;position: relative;">
                    <i class="iconfont icon-duoxuankuang" style="    position: absolute;right: 0;line-height: 3.4;font-size: 22px;"></i>
                </div>

            </div>
            <div style="display: flex;width: 94%;margin: 12px auto; border-bottom: 1px solid #797979;align-items: center;height:82px;justify-content: space-between;padding: 0 8px;">
                <div style="width: 56px;height: 56px;background-color: #607d8b;border-radius: 50%;"></div>
                <div style="margin-left: -204px;">
                    <div style="font-size: x-large;">韩宇轩</div>
                    <div>您好，请问...</div>
                </div>
                <div style="width: 20%;height: 80%;position: relative;">
                    <i class="iconfont icon-duoxuankuang" style="    position: absolute;right: 0;line-height: 3.4;font-size: 22px;"></i>
                </div>

            </div>
            <div style="display: flex;width: 94%;margin: 12px auto; border-bottom: 1px solid #797979;align-items: center;height:82px;justify-content: space-between;padding: 0 8px;">
                <div style="width: 56px;height: 56px;background-color: #607d8b;border-radius: 50%;"></div>
                <div style="margin-left: -204px;">
                    <div style="font-size: x-large;">韩宇轩</div>
                    <div>您好，请问...</div>
                </div>
                <div style="width: 20%;height: 80%;position: relative;">
                    <i class="iconfont icon-duoxuankuang" style="    position: absolute;right: 0;line-height: 3.4;font-size: 22px;"></i>
                </div>

            </div>

        </div>
    </div>
</div>


<script>
    layui.use('element', function(){
        var element = layui.element;

        //一些事件监听
        element.on('tab(demo)', function(data){
            console.log(data);
        });
    });
</script>




</body>
</html>

